<template>
  <div>
    <el-tabs type="card"
    >
      <el-tab-pane label="家庭列表">

        <el-table :data="list" max-height="680" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table :data="props.row.member">
                <el-table-column type="index" width="50"/>
                <el-table-column label="姓名" prop="volunteerName" width="80">
                </el-table-column>
                <el-table-column label="性别" prop="volunteerSex" width="50">
                </el-table-column>
                <el-table-column
                    label="年龄"
                    prop="volunteerAge"
                ></el-table-column>
                <el-table-column label="头像">
                  <template slot-scope="scope">
                    <el-avatar
                        :size="50"
                        :src="scope.row.volunteerAvatar"
                        fit="contain"
                        shape="square"
                    ></el-avatar>
                  </template>
                </el-table-column>
                <el-table-column label="联系方式" prop="volunteerMobile">
                </el-table-column>
                <el-table-column
                    label="志愿者编号"
                    prop="volunteerNo"
                ></el-table-column>
                <el-table-column label="身份证号" prop="volunteerIdentify">
                </el-table-column>
                <el-table-column label="地址" prop="volunteerAddress">
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="家庭宣言" prop="motto"></el-table-column>
          <!--          <el-table-column label="家庭操作">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-button @click="handleDelFamily(scope.row)" size="mini" type="danger">-->
          <!--                删除家庭-->
          <!--              </el-button>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
        </el-table>
        <el-pagination
            :current-page="currentPage"
            :page-size="currentPageSize"
            :page-sizes="[10, 50, 100, 500, 1000, 99999]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleGetBySizeActivity"
            @current-change="handleGetByNumActivity"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      currentPage: 1,
      currentPageSize: 10,
      total: 0,
      keyword: "",
    };
  },
  mounted () {
    this.handleGetFamily();
  },
  methods: {
    // 分页查询全部闲置
    async handleGetFamily () {
      const res = await this.$http.volunteer_familyAll({
        pageNum: this.currentPage,
        pageSize: this.currentPageSize,
      });
      if (res.code !== 0) return null;
      this.list = res.data.list;
      this.total = res.data.totalCount;
    },
    async handleGetBySizeActivity (size) {
      this.currentPageSize = size;
      await this.handleGetFamily();
    },
    // 分页查询全部活动
    async handleGetByNumActivity (num) {
      this.currentPage = num;
      await this.handleGetFamily();
    },
    async handleDelFamily (info) {
      const id = info.familyId;
      let res = await this.$http.family_delete(id);
      if (res?.code !== 0) return this.$message.warning("删除失败");
    },

  },
};
</script>

<style lang="less" scoped>
.commodity-img {
  width: 40px;
}

.el-table {
  margin-top: 20px;
}

.row {
  margin-top: 20px;
}
</style>
